<template>
  <div class="personInfo">
    <el-card :shadow="shadowShow">
      <!-- <div class="person_nav">
                {{ $t('personInfo.xinxi1') }}
            </div> -->
      <div class="avta_info" style="margin-top: 20px">
        <el-image
          style="width: 100px; height: 100px; border-radius: 50%; margin-bottom: 10px"
          :src="
            userInfo.headUrl ||
            'http://39.105.32.98/upload/20230418/8817e05ccbde439988e9aadfda3c78be.jpeg'
          "
        />
        <!-- <el-avatar class="avta" fit='fill' :size="100" :src="userInfo.headUrl || ''"></el-avatar> -->
        <el-upload
          class="upload-demo"
          action=""
          :on-change="handleelchange"
          accept="image/*"
          :auto-upload="false"
          :show-file-list="false"
        >
         

            <el-button size="small" type="primary">
              <el-tooltip class="item" effect="dark" :content="$t('personInfo.xinxi6')" placement="top-start">
              <span  style="width: 80px"  class="ellipsis" >{{ $t('personInfo.xinxi6') }}</span>
            </el-tooltip>
            </el-button>
     
   
        </el-upload>
      </div>
      <div>
        <el-form
          ref="form"
          inline
          label-position="top"
          label-width="180px"
          :model="userInfo"
          :rules="formRules"
          :size="formItemSize"
        >
          <el-row :gutter="15">
            <el-col :span="12">
              <el-form-item :label="$t('personInfo.xinxi7') + '：'" prop="realName">
                <el-input
                  v-model="userInfo.realName"
                  style="width: 320px"
                  :placeholder="$t('personInfo.xinxi8')"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="$t('personInfo.xinxi9') + '：'" prop="">
                <el-input
                  v-model="userInfo.username"
                  style="width: 320px"
                  disabled
                  :placeholder="$t('personInfo.xinxi10')"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="15">
            <el-col :span="12">
              <el-form-item :label="$t('personInfo.xinxi11') + '：'" prop="">
                <el-input style="width: 320px" v-model="userInfo.lastLoginCountry" disabled />
                <!-- <el-select
                  v-model="userInfo.lastLoginCountry"
                  
                  disabled
                  filterable
                >
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select> -->
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="$t('personInfo.xinxi12') + '：'" prop="">
                <el-input
                  v-model="userInfo.createDate"
                  style="width: 320px"
                  :placeholder="$t('personInfo.xinxi13')"
                  disabled
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="15">
            <el-col :span="12">
              <el-form-item :label="$t('personInfo.xinxi14') + '：'" prop="">
                <el-input
                  v-model="userInfo.lastLoginTime"
                  style="width: 320px"
                  :placeholder="$t('personInfo.xinxi13')"
                  disabled
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="$t('personInfo.xinxi15') + '：'" prop="">
                <el-input v-model="userInfo.lastLoginArea" style="width: 320px" disabled />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div style="padding-bottom: 60px; padding-top: 10px">
        <el-button type="primary" :size="optionButtonSize" @click="updateUserInfo">{{
          $t('personInfo.xinxi16')
        }}</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'BLZMasterIndex',

  data() {
    return {
      form: {
        name: '',
      },
      formRules: {
        realName: [
          {
            required: true,
            message: this.$t('add.add058'),
            trigger: 'blur',
          },
        ],
      },
      circleUrl: '',
      options: [
        {
          value: '1',
          label: '中国',
        },
        {
          value: '2',
          label: '俄罗斯',
        },
        {
          value: '3',
          label: '美国',
        },
      ],
      value: '',
      userInfo: {
        realName: '',
      },
    };
  },

  mounted() {
    this.getUserInfo(localStorage.getItem('user_id'));
  },

  methods: {
    // 获取个人信息
    getUserInfo(id) {
      this.$http
        .get(`/sys/user/${id}?timeZone=${this.$timeZone}`)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            this.userInfo = res.data;
          }
        })
        .catch((err) => {
          console.log('err', err);
        });
    },
    updateUserInfo() {
      this.$refs.form.validate((isValid) => {
        if (isValid) {
          if (
            this.userInfo.realName === undefined ||
            this.userInfo.realName === null ||
            this.userInfo.realName === ''
          ) {
            this.$message.warning(this.$t('personInfo.xinxi8'));
            return;
          }
          this.userInfo.id = localStorage.getItem('user_id');
          this.$http
            .put('/sys/user/update', this.userInfo)
            .then(({ data: res }) => {
              if (res.code !== 0) {
                return this.$message.error(res.msg);
              } else {
                this.$message.success(this.$t('personInfo.xinxi17'));
                localStorage.setItem('user_realName', this.userInfo.realName);
                localStorage.setItem('user_headUrl', this.userInfo.headUrl);
                location.reload();
              }
            })
            .catch((err) => {
              console.log('err', err);
            });
        }
      });
    },
    handleelchange(file, fileList) {
      console.log('aaaaaaaaaaaaa', file, fileList);
      const fileSize = file.size / 1024 / 1024 < 10;
      if (!fileSize) {
        this.$message.warning(this.$t('add.add056'));
        return;
      }
      const formData = new FormData();
      fileList.map((item) => {
        // fileList本来就是数组，就不用转为真数组了
        formData.append('file', item.raw, Date.now() + '.jpeg'); // 将每一个文件图片都加进formdata
      });
      this.$http
        .post('/tools/upload', formData)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            this.userInfo.headUrl = res.data.filepath;
          }
        })
        .catch((err) => {
          console.log('err', err);
        });
      // axios.post("接口地址", formdata).then(res => { console.log(res) })
    },
  },
};
</script>

<style lang="scss" scoped>
.personInfo {
  background: white;
  width: 800px;

  .person_nav {
    font-size: 16px;
    font-weight: 500;
    line-height: 28px;
    color: #003e67;
    margin-bottom: 15px;
  }

  .avta_info {
    width: 100px;
    display: flex;
    flex-direction: column;
    // flex-flow: 1;
    margin-bottom: 10px;

    align-items: center;

    .avta {
      margin-bottom: 10px;
    }
  }
}
</style>
